<template>
  <div class="container">
    <el-dialog
      title="供应商详情"
      :visible.sync="detailsDialog.centerDialogVisible"
      center
      :lock-scroll="true"
      width="1000px"
      top="2vh"
      @closed="hideDialog"
      @open="getData"
    >
      <div class="main">
        <el-form
          :model="formData"
          label-width="120px"
          label-position="left"
          class="form"
        >
          <el-form-item label="经营方式：" >
            <span class="item" :title="formData.mode">{{ formData.mode }}</span>
          </el-form-item>
          <el-form-item label="账期方式：">
            <span class="item" :title="formData.payment_type">{{ formData.payment_type }}</span>
          </el-form-item>
          <el-form-item label="结算方式：">
            <span class="item" :title="formData.payment">{{ formData.payment }}</span>
          </el-form-item>
          <el-form-item label="供应商名称：">
            <span class="item" :title="formData.name">{{ formData.name }}</span>
          </el-form-item>
          <el-form-item label="账期天数：">
            <span class="item" :title="formData.payment_days">{{ formData.payment_days }}</span>
          </el-form-item>
          <el-form-item label="对账账号编码：">
            <span class="item" :title="formData.operator_code">{{ formData.operator_code }}</span>
          </el-form-item>
          <el-form-item label="对账账号名称：">
            <span class="item" :title="formData.operator_name">{{ formData.operator_name }}</span>
          </el-form-item>
          <el-form-item label="邮编：">
            <span class="item" :title="formData.postcode">{{ formData.postcode }}</span>
          </el-form-item>
          <el-form-item label="邮箱：">
            <span class="item" :title="formData.email">{{ formData.email }}</span>
          </el-form-item>

          <el-form-item label="国家：">
            <span class="item" :title="formData.countryMsg">{{ formData.countryMsg }}</span>
          </el-form-item>
          <el-form-item v-if="formData.country == 0" label="地址：">
            <span class="item" :title="formData.address">{{ formData.address }}</span>
          </el-form-item>
          <el-form-item label="详细地址：">
            <span class="item" :title="formData.address_detail">{{ formData.address_detail }}</span>
          </el-form-item>
          <el-form-item label="税务登记号：">
            <span class="item" :title="formData.taxpayer">{{ formData.taxpayer }}</span>
          </el-form-item>
          <el-form-item label="状态：">
            <span class="item" :title="formData.states">{{ formData.states }}</span>
          </el-form-item>
        </el-form>

        <el-form
          :model="formData"
          label-width="120px"
          label-position="left"
          class="form"
        >
          <el-form-item label="供应商性质：">
            <span class="item" :title="formData.property">{{ formData.property }}</span>
          </el-form-item>
          <el-form-item label="供应商类型：">
            <span class="item" :title="formData.type">{{ formData.type }}</span>
          </el-form-item>
          <el-form-item label="联系人：">
            <span class="item" :title="formData.contacts">{{ formData.contacts }}</span>
          </el-form-item>
          <el-form-item label="电话：">
            <span class="item" :title="formData.tel">{{ formData.tel }}</span>
          </el-form-item>
          <el-form-item label="传真：">
            <span class="item" :title="formData.fax">{{ formData.fax }}</span>
          </el-form-item>
          <el-form-item label="手机：">
            <span class="item" :title="formData.mobile">{{ formData.mobile }}</span>
          </el-form-item>
          <el-form-item label="开户人姓名：">
            <span class="item" :title="formData.bank_acount_person_name">{{ formData.bank_acount_person_name }}</span>
          </el-form-item>
          <el-form-item label="开户行：">
            <span class="item" :title="formData.bank">{{ formData.bank }}</span>
          </el-form-item>
          <el-form-item label="银行：">
            <span class="item" :title="formData.main_bank">{{ formData.main_bank }}</span>
          </el-form-item>
          <el-form-item label="银行类型：">
            <span class="item" :title="formData.bank_typeMsg">{{ formData.bank_typeMsg }}</span>
          </el-form-item>
          <el-form-item label="账号：">
            <span class="item" :title="formData.bank_acount">{{ formData.bank_acount }}</span>
          </el-form-item>
          <el-form-item label="备注：">
            <span class="item" :title="formData.remarks">{{ formData.remarks }}</span>
          </el-form-item>
          <el-form-item label="联行号：">
            <span class="item" :title="formData.bank_code">{{ formData.bank_code }}</span>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getSupplierInfo } from "@/api/supplier/supplierList";

export default {
  props: {
    detailsDialog: Object,
  },
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    getData() {
      let data = {
        id: this.detailsDialog.id,
      };
      getSupplierInfo(data).then((res) => {
        if (res.code == 0) {
          res.data.countryMsg = res.data.country == 0 ? "中国" : "国外";
          res.data.bank_typeMsg = res.data.bank_type == 1 ? "私户" : "公户";
          this.formData = res.data;
        }
      });
    },
    // 关闭触发的方法
    hideDialog() {
      this.detailsDialog.centerDialogVisible = false;
      this.formData = {};
    },
    //提交
    confirm() {
      this.hideDialog();
    },
  },
};
</script>
<style scoped>
.main {
  display: flex;
}
.form {
  width: 50%;
  padding: 0 20px;
  box-sizing: border-box;
}
.el-form-item {
  height: 40px;
  overflow: hidden;
}
.item {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
</style>